<template>
  <div>
    <!-- 
      .sync 修饰符 是 v-bind 使用的，在满足某种条件的时候可以简写成 .sync 修饰符的形式
     -->
    <HelloWrold :name="username" @update:name="username = $event" />

    <!-- 语法糖 -->
    <HelloWrold :name.sync="username" :title.sync="hello" />

    <HelloWrold
      :name="username"
      @update:name="username = $event"
      :title="hello"
      @update:title="hello = $event"
    />
  </div>
</template>

<script>
import HelloWrold from "./components/HelloWorld.vue";

export default {
  name: "App",

  components: {
    HelloWrold,
  },

  data() {
    return {
      username: "张三",
      hello: "你好",
    };
  },

  methods: {
    onClick() {
      alert("onClick");
    },
  },
};
</script>

<style></style>
